<template>
  <div id="wrapper" class="pb-150 order——mobile_coin_detail">
    <div class="fixed-top fixed-box" style="z-index: 100">
      <div class="top-header border-bottom">
        <div class="top-back"><a href="javascript:history.go(-1)"></a></div>
        <h2 class="f36">订单详情</h2>
        <div class="top-right"></div>
      </div>
    </div>
    <div class="mt-97"></div>
    <div v-if="detail.status">
      <div class="bg-m1 f32 color-fff order_top_tip clearfix" v-if="detail.status === 2 || detail.status === 3 || detail.status === 8">
        <p class="line-60">
          <span class="icon_wait">买家已付款，请<a class="f32 ml-20 mr-20 color-m1 bg-fff px-15 contact-kf" @click="goToServe()">联系客服</a>发货</span>
        </p>
      </div>
      <div class="bg-2a f32 color-fff order_top_tip clearfix" v-else-if="detail.status === 4">
        <p class="line-60">
          <span class="icon_firm">交易成功</span>
        </p>
      </div>
      <div class="bg-999 f32 color-fff order_top_tip" v-else>
        <p class="line-60">
          <span class="icon_fail">交易取消</span>
        </p>
      </div>
    </div>
    <div class="detail_container bg-fff clearfix">
      <img class="game_logo fl" :src="detail.goodsImg">
      <div class="order-detail">
        <p class="order-title f30 color-000">{{detail.title}}</p>
        <p class="yxb-price f30 mt-20 color-000">￥<span class="fontarial">{{detail.price}}</span></p>
      </div>
    </div>
    <!--游戏币订单详情新增交易说明09/05-->
    <div class="order-explain bg-fff border-top px-30 border-bottom" v-if="tradeDescription.length"
         @click="showTradeDescription=true">
      <i class="icon-order-explain fl"></i>
      <span class="f28 color-000 fl">交易说明</span>
      <i class="to-right fr"></i>
    </div>


    <div class="detail_container bg-fff mt-20 border-top border-bottom">
      <p class="f30 mb-30"><span class="color-666 pr-30">游戏区服</span><span
         class="color-000">{{detail.gameName}}/{{detail.regionName}}/{{detail.serverName}}</span></p>
      <p class="f30"><span class="color-666 pr-30">商品类型</span><span class="color-000">游戏币</span></p>
    </div>
    <!--游戏币新增09/05-->
    <div class="detail_container bg-fff border-bottom">
      <p class="f30 mb-30"><span class="color-666 pr-30">商品价格</span><span class="color-666  fr">￥<span class="fontarial">{{detail.price}}</span></span>
      </p>
      <p class="f30 mb-30"><span class="color-666 pr-30">商品件数</span><span
         class="color-666 fontarial fr">x{{detail.num}}</span></p>
      <p class="f30 mb-30"><span class="color-666 pr-30">商品总价</span><span
         v-if="detail.price"
         class="color-666 fr">￥<span class="fontarial">{{detail.price * detail.num}}</span></span></p>
      <p class="f30"><span class="color-666 pr-30">交易服务费</span><span
         class="color-666 fr">-￥<span class="fontarial">{{detail.commission}}</span></span></p>
    </div>

    <div class="total_container bg-fff border-bottom">
      <p class="f30 mb-30"><span
         v-if="detail.price"
         class="color-m1 fr ml-30">￥<span class="fontarial">{{(detail.price * detail.num - detail.commission).toFixed(2)}}</span></span><span
         class="color-666 fr">实际收益</span>
      </p>
    </div>

    <div class="detail_container bg-fff mt-20 border-top border-bottom">
      <p class="f30 mb-30"><span class="color-666 pr-30">订单编号</span><span class="color-666">{{detail.orderId}}</span>
        <a class="copy ml-20 color-666 f24" :data-clipboard-text="detail.orderId" @click="copy" ref="mgCoy">复制</a></p>
      <p class="f30"><span class="color-666 pr-30">下单时间</span><span class="color-666">{{detail.createTimeString}}</span>
      </p>
    </div>


    <div class="fixed-bottom mancon-btn pr-30 py-20 bg-fff border-top"><a
       class="f30 color-m1 border border-color cancel fr" href="javascript:void(0)" @click="goToServe()">联系客服</a>
      <i class="titcur fr" @click="alertMessage"></i>
    </div>
    <!--交易说明弹框-->
    <div class="maskdiv" v-if="showTradeDescription" @click="showTradeDescription=false" @touchmove.prevent></div>
    <div class="bomb-bottom bg-fff" v-if="showTradeDescription" style="z-index: 60;overflow: scroll"
         :style="{'max-height': .6 * height + 'px'}">
      <div class="bomb-title border-bottom">
        <h1><span class="f32 color-666">交易说明</span><i class="bomb-close" @click="showTradeDescription = false"></i></h1>
      </div>
      <div class="bomb-content px-30 py-20" v-html="tradeDescription">
      </div>
    </div>
  </div>
</template>
<script>
  import Clipboard from 'clipboard'
  import api from '../../../../api';
  export default {
    data() {
      return {
        height: window.innerHeight,
        tradeDescription: '', // 交易说明
        showTradeDescription: false, // 是否显示交易说明
        detail: {},
        url: location.protocol+'//'+location.hostname+'/api/mobile-order-service/rs/orderdata/getOrderIm',
        query: this.$route.query
      }
    },
    created() {
      this.$indicator.open()
    },
    mounted() {
      this.$bus.emit('headerText', '订单详情')
      this.init()
      this.clipboard = new Clipboard(this.$refs['mgCoy'])
    },
    beforeDestroy() {
      this.$indicator.close()
    },
    methods: {
      goToServe () {
        const qq = this.detail.serviceQQ
        if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
          this.$messagebox({
            message: "如点击联系客服无法启动QQ，请加客服QQ号(" + qq + ")"
          })
        }else {
          window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + qq + '&version=1&src_type=web&web_src=oicqzone.com')
        }
      },
      goCustomer(val, url) {
        if (Object.keys(val).length) {
          if (val.IsOpenHX) {
            location.href=`/member/huanxin1.html?url=${encodeURIComponent(url)}`
          } else {
            if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
              this.$messagebox({
                message: "如点击联系客服无法启动QQ，请加客服QQ号("+val.CustomServiceQQ+")"
              })
            }else {
              window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + val.CustomServiceQQ + '&version=1&src_type=web&web_src=oicqzone.com')
            }
          }
        }
      },
      contactCustom(){
        let url = this.$concatUrl({orderId: this.detail.orderId, userType:0, callback:'callback'}, this.url)
        console.log(url)
        api.BuyerCenterApi.getOrderIm(url).then(res => {
          if (res.data) {
            if (res.data.Order) {
              this.goCustomer(res.data.Order, url)
            }
          }
        })
      },
      alertMessage() {
        if (!!this.detail.serviceQQ) {
          this.$messagebox({
            message: "如点击联系客服无法启动QQ，请加客服QQ号(" + this.detail.serviceQQ + ")"
          })
        } else {
          this.$messagebox({
            message: "该订单正在分配客服"
          })
        }
      },
      copy() {
        this.clipboard.on('success', e => {
          this.$toast('订单号已复制到剪贴板')
          e.clearSelection();
        });
        this.clipboard.on('error', e => {
          this.$toast('复制失败，请尝试长按复制')
        });
      },
      init() {
        /* 获取订单详情 */
        this.setDetail().then(() => {
          /* 获取描述 */
          let params = {gameId: this.detail.gameId, goodsType: this.detail.goodsType}
          this.$http.get(this.$CONSTANTS.APICategory + 'goodsTypeGameService/selectTradeDescription', {params}).then(res => {
            this.tradeDescription = res.data.tradeDescription || ''
          }).then(() => {
            this.$indicator.close()
          })
        })
      },
      /* 配置详情 */
      setDetail() {
        return this.$http.get(`/api/mobile-order-service/rs/seller/order/${this.query.orderId}_${this.query.Id}`).then(({data: res}) => {
          res.result.createTimeString = this._turnTime(res.result.createTime) // 格式化创建时间
          this.detail = res.result
        })
      },
      _turnNum(num) {
        if (num < 10) return '0' + num
        return num
      },
      _turnTime(date) {
        date = new Date(date)
        return date.getFullYear() + '-' +
          this._turnNum(date.getMonth() + 1) + '-' +
          this._turnNum(date.getDate()) + ' ' +
          this._turnNum(date.getHours()) + ':' +
          this._turnNum(date.getMinutes()) + ':' +
          this._turnNum(date.getSeconds())
      }
    }
  }
</script>
<style src="css/member/member-mbgame.css" ></style>
<style>
  .order——mobile_coin_detail .bomb-content img {
    max-width: 100%;
  }
</style>

<style scoped>
  .message_confirm {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1000;
  }
</style>